<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>上传文件</title>
	</head>
	<body>
<!--
		<form action="/wsgi/upload" enctype="multipart/form-data" method="post">
			<input type="file" name="uploadfile"/>
			<input type="input" name="descrip">
			<input type="submit" value="上传">
		</form>
-->
<!-- 拖动上传区域 -->
    <b>拖动上传区域，可以一次上传多个文件</b><br/>
	<input type="file" id="file_upload" style="height:100px" multiple/>
	<div id="screen1">报告区：</div>
<script>
var control = document.getElementById("file_upload");
var idx=0,num=0;
function upload_end(e){
	upload_file();
}
function upload_file(){
    if( idx >= control.files.length ){
		//console.log("end");
		return 0;
	}
	//console.log("upload");
	var form = new FormData();
	form.append("name", "uploadfile");
	form.append("uploadfile", control.files[idx]); 
	// 通过 XHR 传送，没有传送 header!
	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
		//console.log("onload");
        if(xhr.readyState == 4 && xhr.status == 200) {
			idx = idx + 1;
			num = num + 1
			document.getElementById("screen1").innerHTML = document.getElementById("screen1").innerHTML + "<br/>"+num+" 上传: "+control.files[idx-1].name;
			//console.log(xhr.response)
            upload_file();
        }
        if(xhr.status==500){
			console.log('internal server error')
			console.log(xhr.response)
			document.getElementById("screen1").innerHTML = document.getElementById("screen1").innerHTML + " - 内部错误。";
		}
    };
	xhr.open("post", "/wsgi/upload", true);
	xhr.send(form);
}

control.addEventListener("change",  function(event) {    // 当 control 改变的时候  
    var i = 0, files = control.files, len = files.length; 
    idx = 0;
  	if(i<len){
		upload_file();
	  }
   }   , false);
</script>
	</body>
</html>
